<script setup lang="ts">
import type { NewItem } from '@/types/home'

defineProps<{
  source: NewItem[]
}>()
</script>

<template>
  <view class="panel fresh">
    <view class="title">
      新鲜好物
      <navigator hover-class="none" class="more" url="/pages/recommend/index?type=5">
        更多
      </navigator>
    </view>
    <view class="cards">
      <navigator
        class="cards-item"
        hover-class="none"
        :url="`/pages/goods/index?id=${item.id}`"
        v-for="item in source"
        :key="item.id"
      >
        <image class="image" mode="aspectFit" :src="item.picture"></image>
        <view class="name">{{ item.name }}</view>
        <view class="price"> <text class="small">¥</text>{{ item.price }}</view>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
/* 新鲜好物 */
.fresh {
  min-height: 320rpx;
  .cards-item {
    width: 178rpx;
    padding: 15rpx 20rpx 20rpx;
    line-height: 1;
    text-align: center;
  }
  .image {
    width: 126rpx;
    height: 126rpx;
  }
  .name {
    margin: 20rpx 0 16rpx;
    font-size: 24rpx;
    color: #262626;
  }
  .price {
    line-height: 1;
    text-align: left;
    font-size: 26rpx;
    color: #cf4444;
  }
  .small {
    font-size: 80%;
  }
}
</style>
